<template>
  <div class="divider"></div>
  <div class="comment-box">
    <div class="comment-list">
      <div class="editorbox" v-if="showeditor">
        <div id="ksd-editor-box" style="margin-top: 20px;background:#f0f0f0;padding:20px;">
          <div class="comment-title" style="display:flex;justify-content:space-between;align-content: center">
            <h3 class="ctitle"> 评论({{ total || 0 }}) </h3>
            <div class="flex">
              <div class="mr10 flex align-center pr tp2" v-if="closescore && false">
                <span class="fz16 mr10 fb pr tp1">{{activeNum}}分</span>
                <k-star @active="handleActive" :num="activeNum"></k-star>
              </div>
              <n-button type="error" class="mx--2" @click="handleRecoverEditor" v-if="closeFlag">取消</n-button>
              <n-button type="success" :loading="loadingSubmit" @click="handleSubmit">
                <n-icon>
                  <Add></Add>
                </n-icon>
                发表评论
              </n-button>
            </div>
          </div>
          <div class="mb-10 mt-2 k-editor">
            <k-editor mode="tab" ref="editorRef" v-model:html="comment.content"></k-editor>
          </div>
        </div>
      </div>
      <div class="comment-item" v-for="(item,index) in commentList" :key="item.id">
        <div class="author-info">
          <div class="author-avatar"><img v-lazy="item.avatar" alt=""></div>
          <div class="comment-content-box">
            <div class="flex align-center justify-content-between">
              <div>
                <div class="author-nickname">
                  <nuxt-link  to="javascrit:void(0);"  > {{ item.nickname }} <span class="ml5"><k-vip :vip="item.vipType"></k-vip></span></nuxt-link>
                </div>
                <div class="comment-time" :title="formatTimeToStr(item.createTime)">
                  {{ formatMsgTime(item.createTime) }}
                </div>
              </div>
              <div v-if="closescore"><k-star :num="item.score" disable></k-star></div>
            </div>
            <div class="comment-content">
              <div class="markdown-body" v-html="item.content"></div>
              <div class="comment-action" v-if="showeditor">
                <span v-if="false">
                  <svg viewBox="0 0 1024 1024"
                       width="1.2em" height="1.2em"><path
                      fill="currentColor"
                      d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7c9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path>
                  </svg> 赞
                </span>
                <span v-if="false">
                  <svg viewBox="0 0 1024 1024" width="1.2em" height="1.2em"><path
                      fill="currentColor"
                      d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37c0-28.3-9.3-55.5-26.1-77.7c3.6-12 5.4-24.4 5.4-37c0-28.3-9.3-55.5-26.1-77.7c3.6-12 5.4-24.4 5.4-37c0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4c20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3c40.4-23.5 65.5-66.1 65.5-111c0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5c-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4l21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4l21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5l21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"></path>
                  </svg>踩
                </span>
                <span @click="handleReply(item,item,index,-1,$event)" v-if="showeditor">
                  <svg t="1609041095002" class="icon" viewBox="0 0 1058 1024"
                       version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4905" width="16"
                       height="16"><path
                      d="M330.744242 885.372121l194.779798-129.861818 16.665859-11.106263h383.844848c36.486465 0 66.19798-29.659798 66.19798-66.146262v-529.19596c0-36.434747-29.711515-66.107475-66.19798-66.107475H132.305455c-36.486465 0-66.146263 29.659798-66.146263 66.107475v529.19596c0 36.486465 29.659798 66.146263 66.146263 66.146262h198.438787v140.968081m-66.146262 123.578182V810.550303H132.305455c-73.024646 0-132.305455-59.216162-132.305455-132.292525v-529.19596C0 76.024242 59.267879 16.808081 132.305455 16.808081h793.742222c73.076364 0 132.357172 59.216162 132.357171 132.240808v529.195959c0 73.076364-59.267879 132.292525-132.357171 132.292526h-363.830303L264.59798 1008.950303z m0 0"
                      p-id="4906"></path></svg>
                      回复 <span v-if="item.replyNum > 0"> ({{ item.replyNum }})</span>
                </span>
                <div  v-if="useIsLogin() && showeditor  && (item.uuid == userStore.uuid || userStore.role=='admin')" class="del-btn">
                  <n-popconfirm
                      positive-text="确定"
                      negative-text="取消"
                      @positive-click="handleDelComment(item,index)"
                  >
                    <template #trigger>
                      <span class="comment-action-del"><i class="iconfont icon-shanchu3"></i> 删除 </span>
                    </template>
                    你确定删除此评论吗？
                  </n-popconfirm>
                </div>
              </div>
            </div>
            <template v-if="item.children">
              <div class="comment-item comment-item-children" v-for="(citem,cindex) in item.children" :key="citem.id">
                <div class="author-info">
                  <div class="author-avatar"><nuxt-link  to="javascrit:void(0);"  class="flex"><img v-lazy="citem.avatar" alt=""></nuxt-link></div>
                  <div class="comment-content-box">
                    <div class="flex align-center justify-content-between">
                      <div>
                        <div class="author-nickname">
                          <nuxt-link to="javascript:void(0);"> {{ citem.nickname }} <span class="ml5"><k-vip :vip="citem.vipType"></k-vip></span></nuxt-link>
                        </div>
                        <div class="comment-time" :title="formatTimeToStr(citem.createTime)">
                          {{ formatMsgTime(citem.createTime) }}
                        </div>
                      </div>
                      <div v-if="closescore"><k-star :num="citem.score" disable></k-star></div>
                    </div>
                    <div class="comment-content">
                      <div class="markdown-body" v-html="citem.content"></div>
                      <div class="comment-action"  v-if="showeditor">
                       <span v-if="false">
                          <svg viewBox="0 0 1024 1024"
                               width="1.2em" height="1.2em"><path
                              fill="currentColor"
                              d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7c0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4c47.6-20.3 78.3-66.8 78.3-118.4c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c0-12.6-1.8-25-5.4-37c16.8-22.2 26.1-49.4 26.1-77.7c-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19l13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7c9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg>
                          赞
                        </span>
                        <span v-if="false">
                          <svg viewBox="0 0 1024 1024" width="1.2em" height="1.2em"><path
                              fill="currentColor"
                              d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37c0-28.3-9.3-55.5-26.1-77.7c3.6-12 5.4-24.4 5.4-37c0-28.3-9.3-55.5-26.1-77.7c3.6-12 5.4-24.4 5.4-37c0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4c20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3c40.4-23.5 65.5-66.1 65.5-111c0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5c-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4l21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4l21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5l21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"></path></svg>
                          踩
                        </span>
                        <span @click="handleChildReply(item,citem,index,cindex,$event)" v-if="showeditor"><svg t="1609041095002"
                                                                                             class="icon"
                                                                                             viewBox="0 0 1058 1024"
                                                                                             version="1.1"
                                                                                             xmlns="http://www.w3.org/2000/svg"
                                                                                             p-id="4905" width="16"
                                                                                             height="16"><path
                            d="M330.744242 885.372121l194.779798-129.861818 16.665859-11.106263h383.844848c36.486465 0 66.19798-29.659798 66.19798-66.146262v-529.19596c0-36.434747-29.711515-66.107475-66.19798-66.107475H132.305455c-36.486465 0-66.146263 29.659798-66.146263 66.107475v529.19596c0 36.486465 29.659798 66.146263 66.146263 66.146262h198.438787v140.968081m-66.146262 123.578182V810.550303H132.305455c-73.024646 0-132.305455-59.216162-132.305455-132.292525v-529.19596C0 76.024242 59.267879 16.808081 132.305455 16.808081h793.742222c73.076364 0 132.357172 59.216162 132.357171 132.240808v529.195959c0 73.076364-59.267879 132.292525-132.357171 132.292526h-363.830303L264.59798 1008.950303z m0 0"
                            p-id="4906"></path></svg>回复
                        </span>
                        <div v-if="useIsLogin() && showeditor  && (citem.uuid == userStore.uuid || userStore.role=='admin')" class="del-btn">
                          <n-popconfirm
                              positive-text="确定"
                              negative-text="取消"
                              @positive-click="handleDelReplyComment(item,citem,index,cindex)"
                          >
                            <template #trigger>
                              <span class="comment-action-del"><i class="iconfont icon-shanchu3"></i>删除 </span>
                            </template>
                            你确定删除此评论吗？
                          </n-popconfirm>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="item.pageNo + 1 <  item.pages"><!--这个判断是处理有回复才显示-->
                <a href="javascript:void(0);" class="flex items-center" @click="handleLoadReplay(item,index)"><span
                    style="width: 40px;height: 1px;display: inline-block;margin-right:10px;background:#e6e4e4;"></span>展开({{ item.replyNum }})回复</a>
              </div>
              <template v-else>
                <div v-if="item.children.length > 0" style="color:#999">没有更多回复了</div> <!--如果一个回复都没有了，也不需要在显示没有更多了-->
              </template>
            </template>
          </div>
        </div>
      </div>
      <k-loading :show="loadingFlag"></k-loading>
      <k-empty-comment desc="坐等沙发，发表的意见和看法" :show="total==0"></k-empty-comment>
      <div class="load-more mt20" v-if="pages > queryParams.pageNo">
        <a href="javascript:void(0);" @click="handleLoadMore" v-if="queryParams.pageNo < pages">加载更多 ({{ total }} /
          {{ queryParams.pageNo }})</a>
        <a v-else>没有更多评论了，到底了</a>
      </div>
    </div>
  </div>
</template>
<script setup>
// 自定义属性
const props = defineProps({
  opid: {type: [String]},
  showeditor:{type:Boolean,default:true},
  closescore:{ type:Boolean,default:false}
})
const activeNum = ref(5)
// 编辑器对象
const editorRef = ref({})
const closeFlag = ref(false)
const currentIndex = ref(-1)
const currentChildIndex = ref(-1)
// 准备保存的数据参数
const comment = ref({opid: props.opid, content: "", parentId: "0", pid: "0",score:5})
const loadingSubmit = ref(false)
// 获取状态管理
const userStore = useStore.userState()
// 评论分页
const queryParams = ref({pageNo: 1, pageSize: 10, opid: props.opid})
const commentList = ref([])
const loadingFlag = ref(false)
const total = ref(0)
const pages = ref(0)

const handleActive = (num)=>{
  activeNum.value = num
}
// 执行保存方法
const handleSubmit = async () => {
  await useLoginDialog()
  if (!comment.value.content) {
    useMessage().error("请输入评论内容!!!")
    return;
  }

  if (comment.value.parentId == 0) {
    handleSubmitParent()
  } else {
    handleSubmitReply()
  }
}

// 回复
const handleSubmitReply = async () => {
  try {
    loadingSubmit.value = true
    // 指定评论的专题ID
    comment.value.opid = props.opid
    comment.value.score = activeNum.value || 5
    const resp = await useSpecialSaveCommentReplyApi(comment.value)
    comment.value.id = resp.data.id
    comment.value.username = resp.data.username
    comment.value.uuid = resp.data.uuid
    comment.value.avatar = resp.data.avatar
    comment.value.createTime = new Date()
    loadingSubmit.value = false
    // 加载回复问题
    commentList.value[currentIndex.value].children.unshift({...comment.value})
    commentList.value[currentIndex.value].replyNum++
    // 提示
    useMessage().success("评论成功，审核通过才可以对外查看！")
    // 开始走清除
    comment.value.content = ""
    activeNum.value = 5
    editorRef.value.handleClearEditor()
  } catch (e) {
    // 捕捉服务端的校验返回的错误信息
    loadingSubmit.value = false
    useMessage().error(e.message)
  }
}

// 主评论
const handleSubmitParent = async () => {
  try {
    loadingSubmit.value = true
    // 指定评论的专题ID
    comment.value.opid = props.opid
    comment.value.score = activeNum.value || 5
    await useSpecialSaveCommentApi(comment.value)
    loadingSubmit.value = false
    useMessage().success("评论成功，审核通过才可以对外查看！")
    comment.value.content = ""
    total.value++
    activeNum.value = 5
    editorRef.value.handleClearEditor()
    commentList.value = []
    queryParams.value.pageNo = 1
    handleLoadComennt()
  } catch (e) {
    // 捕捉服务端的校验返回的错误信息
    loadingSubmit.value = false
    useMessage().error(e.message)
  }
}

// 查询所有的评论
const handleLoadComennt = async () => {
  loadingFlag.value = true
  const resp = await useSpecialLoadCommentApi(queryParams.value)
  loadingFlag.value = false
  commentList.value = commentList.value.concat(resp.data.records)
  total.value = resp.data.total
  pages.value = resp.data.pages
}

// 点击加载更多评论
const handleLoadMore = () => {
  if (queryParams.value.pageNo == pages.value) {
    return
  }
  queryParams.value.pageNo++
  handleLoadComennt()
}

// 删除评论
const handleDelComment = async (item, index) => {
  await useLoginDialog()
  handleRecoverEditor()
  await useSpecialDelCommentApi({opid: item.opid, id: item.id})
  commentList.value.splice(index, 1)
  total.value--
  // 页面上删除的元素一个都不剩下，就直接查询一次加载后面的评论
  if (commentList.value.length == 0) {
    commentList.value = []
    queryParams.value.pageNo = 1
    handleLoadComennt()
  }
}

// 删除子回复
const handleDelReplyComment = async (item, citem, index, cindex) => {
  await useLoginDialog()
  var params = {opid: citem.opid, id: citem.id, parentId: item.id}
  await useSpecialDelCommentReplyApi(params)
  commentList.value[index].children.splice(cindex, 1)
  commentList.value[index].replyNum--
  handleRecoverEditor()
}

// 回复
const handleReply = (item, citem, index, cindex, e) => {
  if (currentIndex.value == index) return;
  closeFlag.value = true
  // 1: 获取编辑器对象
  var editorDom = document.querySelector("#ksd-editor-box")
  e.target.parentElement.parentElement.appendChild(editorDom)
  comment.value.parentId = item.id
  comment.value.pid = citem.id
  currentIndex.value = index
}

// 子回复
const handleChildReply = (item, citem, index, cindex, e) => {
  if (currentIndex.value == index && currentChildIndex.value == cindex) return;
  closeFlag.value = true
  // 1: 获取编辑器对象
  var editorDom = document.querySelector("#ksd-editor-box")
  e.target.parentElement.parentElement.parentElement.appendChild(editorDom)
  comment.value.parentId = item.id
  comment.value.pid = citem.id
  currentIndex.value = index
  currentChildIndex.value = cindex
}

// 恢复
const handleRecoverEditor = () => {
  closeFlag.value = false
  var editorDom = document.querySelector("#ksd-editor-box")
  var editorBoxDom = document.querySelector(".editorbox")
  editorBoxDom.appendChild(editorDom)
  comment.value.parentId = "0"
  comment.value.pid = "0"
  currentIndex.value = -1
  currentChildIndex.value = -1
}

// 加载回复
const handleLoadReplay = async (item, index) => {
  const pageSize = 3
  const totalPage = Math.floor(item.replyNum / pageSize)
  item.pages = item.replyNum % pageSize == 0 ? totalPage : totalPage + 1
  if (item.pageNo >= item.pages) {
    return
  }
  item.pageNo++
  const params = {parentId: item.id, opid: props.opid, pageNo: item.pageNo + 1, pageSize: pageSize}
  const resp = await useSpecialLoadCommentReplyApi(params)
  commentList.value[index].children = commentList.value[index].children.concat(resp.data.records)
}


onMounted(() => {
  handleLoadComennt()
})

</script>
<style scoped>
.k-editor  :deep(.ksd-editor-mainbox .editor .bytemd) {
  height: 300px!important;
}
.comment-list .load-more a {
  display: block;
  text-align: center;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
}

.comment-list .load-more a:hover {
  background: #eee;
}

.comment-list .comment-title {
  padding-bottom: 12px
}

.comment-list > .comment-item .comment-item-children {
  margin: 1.875rem 0;
}

.comment-list > .comment-item {
  border-bottom: .0625rem solid #f6f8fb;
  margin-top: 1.25rem;
  background: #f0f0f0;
  padding: 40px;
  border-radius:20px;
  position: relative
}

.comment-list > .comment-item .comment-action .del-btn {
  display: none;
  position: relative;
  top: 4px;
}

.comment-list > .comment-item .comment-action:hover .del-btn {
  display: block;
}

.comment-item {
  margin-top: .5rem
}

.comment-item .comment-content-box {
  margin-left: 2.5rem;
  padding-left: .625rem;
  position: relative
}

.comment-item .author-avatar {
  float: left
}

.comment-item .author-avatar img {
  border-radius: 50%;
  height: 2.1875rem;
  width: 2.1875rem
}

.comment-item .author-info {
  padding-top: .3125rem
}

.comment-item .author-info .comment-time {
  color: var(--f-color-3);
  font-size: .8125rem;
  margin-left: auto
}

.comment-item .author-info .author-nickname {
  font-size: 12px;
  font-weight: 700
}

.comment-item .comment-content {
  color: var(--f-color-7);
  line-height: 1.5;
  margin: .3125rem auto
}

.comment-item .comment-action {
  height: 1.875rem
}

.comment-item .comment-action, .comment-item .comment-action span, .comment-item .comment-action > div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.comment-item .comment-action span {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-right: .5rem
}

.comment-item .comment-action span i, .comment-item .comment-action span svg {
  margin-right: .25rem
}

.comment-content a {
  color: #0681d0
}

.comment-content .comment-content-html {
  display: inline-block
}

.comment-item .comment-action span {
  color: var(--f-color-4);
  cursor: pointer;
  font-size: .8125rem;
  margin-right: 12px
}

.comment-item .comment-action span:hover {
  color: var(--f-color-8)
}
</style>